<!DOCTYPE html>
<!-- html -->
<html>
<!-- head -->

<head>
    <title>情感学院</title>
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" /><!-- bootstrap-CSS -->
<link href="css/font-awesome.css" rel="stylesheet" type="text/css" media="all" /><!-- Fontawesome-CSS -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script type='text/javascript' src='js/jquery-2.2.3.min.js'></script>
<script type='text/javascript' src='js/template.js'></script>
<!-- Custom Theme files -->
<link href="css/menu.css" rel="stylesheet" type="text/css" media="all" /> <!-- menu style --> 
<!--theme-style-->
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />	
<!--//theme-style-->
<link rel="stylesheet" type="text/css" href="css/easy-responsive-tabs.css " />
<!--meta data-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta name="keywords" content="" />
<script type="text/javascript">
    function isWeixnOpen(){

    var ua = navigator.userAgent.toLowerCase();

    if(ua.match(/MicroMessenger/i)=="micromessenger") {

        return true;

    } else {

        return false;

    }

}
 $(function(){
  if (isWeixnOpen()) {

  }
  else{
    // document.oncontextmenu=new Function("event.returnValue=false;");
    // document.onselectstart=new Function("event.returnValue=false;");
    // $("body").text("请在微信打开");
    // $("body").css("text-align","center");
  }
 })
</script>
    <script type="application/x-javascript">
    addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);

    function hideURLbar() { window.scrollTo(0, 1); }
    </script>
    <!--//meta data-->
    <!-- nav smooth scroll -->
    <script>
    $(document).ready(function() {
        $(".dropdown").hover(
            function() {
                $('.dropdown-menu', this).stop(true, true).slideDown("fast");
                $(this).toggleClass('open');
            },
            function() {
                $('.dropdown-menu', this).stop(true, true).slideUp("fast");
                $(this).toggleClass('open');
            }
        );
    });
    </script>
    <!-- //nav smooth scroll -->
   <style type="text/css">
    .tabStyle{
        width: 100%;
        height: 50px;

    }
    .tabStyle li{
        float: left;
        width: 50%;
        line-height: 40px;
        text-align: center;
        list-style: none;
        border-bottom: 2px solid #ddd;
    }
     .tabStyle li:nth-of-type(1){

       
     }

     .tab-list{
        line-height: 48px!important;
     }
     .tab-list.selected{
        color: #00c4da;
         border-bottom: 2px solid #00c4da;
     }
    </style>
</head>
<!-- //head -->
<!-- body -->

<body>
    <!-- header -->
      <!-- <header>
    <div class="navbar navbar-inverse-blue navbar">
        <div class="navbar-inner">
            <div class="container">
                <div class="menu">
                    <div>
                        <a class="cd-dropdown-trigger" href="#0" style="color: rgba(0,0,0,0);">浏览资料</a>
                    </div>
                </div>
                <div class="pull-right">
                    <nav class="navbar nav_bottom" role="navigation">
                        <div class="navbar-header nav_2">
                            <button type="button" class="navbar-toggle collapsed navbar-toggle1" data-toggle="collapse" data-target="#bs-megadropdown-tabs">菜单
                                <span class="sr-only">切换导航</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                        </div>
                        <div class="collapse navbar-collapse" id="bs-megadropdown-tabs">
                            <ul class="nav navbar-nav nav_1">
                                <li class="active"><a href="index.html">首页</a></li>
                                <li><a href="./activity.html">活动</a></li>
                                <li><a href="./emotional.html">情感专栏</a></li>
                                <li class="last"><a href="./loveLesson.html">恋爱技巧</a></li>
                            </ul>
                        </div>
                    </nav>
                </div>
                <div class="clearfix"> </div>
            </div>
        </div>
    </div>
</header> -->
    <!-- /header -->
    <!-- inner banner -->
    <div style="position: relative;">
      <img style="width: 100%;" src="./images/ban6.png">
      <img style="position: absolute;width: 30%;top: 10px;left: 10px;"  src="./images/logo.png">
    </div>
    <!-- //inner banner -->
    <!-- breadcrumbs -->
    <!-- //breadcrumbs -->
    <!-- Bridegroom Profile Details -->
    <div class="w3ls-list" style="padding-top: 0;">
        <div class="container" style="padding: 0;">
             <ul class="tabStyle">
                <li class="tab-list selected" value="0">最受欢迎</li>
                <li class="tab-list" value="1">重磅推荐</li>
            </ul>
            
            <div class="col-md-3 w3ls-aside">
                <div class="view_profile" id="showList">
                   
                    <script id="tpl" type="text/html">
                        <%:=newsListTpl({list: list1, newsTpl: newsTpl})%>
                    </script>
                    <script id="child-tpl" type="text/html">
                        <%list.forEach(function (news) {%>
                            <%:=newsTpl(news)%>
                                <%})%>
                    </script>
                    <script id="sub-child-tpl" type="text/html">
                        <ul class="profile_item">
                            <a href="./nhtml/teacher.html?expert_no=<%=expert_no%>">
                                <li class="profile_item-img">
                                    <img src="<%=expert_photos%>" class="img-responsive" alt="">
                                </li>
                                <li class="profile_item-desc">
                                    <h6 style="font-size: 18px; font-weight: 400;"><%=expert_name%></h6>
                                    <p style="font-size: 14px;"><%=areas_expertise%></p>
                                    <p style="color: #999;font-size: 13px;"><%=expert_profile%></p>
                                </li>
                                <div class="clearfix"> </div>
                            </a>
                        </ul>
                    </script>
                   
                </div>
            </div>
            <div class="clearfix"></div>
        </div>
        
    </div>
    <script src="js/easyResponsiveTabs.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {

        $('#parentHorizontalTab').easyResponsiveTabs({
            type: 'default', //Types: default, vertical, accordion
            width: 'auto', //auto or any width like 600px
            fit: true, // 100% fit in a container
            closed: 'accordion', // Start closed if in accordion view
            tabidentify: 'hor_1', // The tab groups identifier
            activate: function(event) { // Callback function if tab is switched
                var $tab = $(this);
                var $info = $('#nested-tabInfo');
                var $name = $('span', $info);

                $name.text($tab.text());

                $info.show();
            }
        });

    });
    </script>
    
    <script src="js/jquery.menu-aim.js">
    </script>
    <script src="js/main.js"></script>
    <!-- Resource jQuery -->
    <!-- //menu js aim -->
    <!-- for bootstrap working -->
    <script src="js/bootstrap.js"></script>
    <!-- //for bootstrap working -->
    <script type="text/javascript">
    $(document).ready(function() {
        $().UItoTop({ easingType: 'easeOutQuart' });
    });
    </script>
    <a href="#" id="toTop" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> </span></a>
    <!-- for smooth scrolling -->
    <script type="text/javascript" src="js/move-top.js"></script>
    <script type="text/javascript" src="js/easing.js"></script>
    <script type="text/javascript">
    jQuery(document).ready(function($) {
        $(".scroll").click(function(event) {
            event.preventDefault();
            $('html,body').animate({ scrollTop: $(this.hash).offset().top }, 1000);
        });
    });
    </script>
    <script type="text/javascript">
  
   getExpert();
   var  popularArr=new Array();
    var recommendArr=new Array();
   function getExpert(){
        $.ajax({
        method: "get",
        url: "/expert/getAllExpert",
        success: function(res) {
            console.log(res)
            if (res.code == 200) {  
            for (var i = 0; i < res.data.length; i++) {
                if(res.data[i].exp_type==1){
                  popularArr.push(res.data[i])  
                }else{
                 recommendArr.push(res.data[i])  
                }
               
            }
             showView(popularArr);
            } else {

            }

        },
        error: function(error) {
            console.log(error)
        }
    }) 
    }
    var tpl = template(document.getElementById('tpl').innerHTML);
    var childTpl = template(document.getElementById('child-tpl').innerHTML);
    var subChildTpl = template(document.getElementById('sub-child-tpl').innerHTML);
    function showView(arr){
       var html = tpl({
        newsListTpl: childTpl,
        newsTpl: subChildTpl,
        list1: arr
    })
    document.getElementById('showList').innerHTML = html;
    }
   
   $(".tabStyle li").click(function(){
      $(this).addClass('selected')
      $(this).siblings().removeClass('selected');
      console.log($(this).val())
      if ($(this).val()=='0') {
        showView(popularArr);
      }else{
       showView(recommendArr);

      }
      

   })

    </script>
    <!-- //for smooth scrolling -->
</body>
<!-- //body -->

</html>
<!-- //html -->